<template>
  <div class="shujufenxi">
    <div class="shang">
      <div class="tab">
        <div class="item shoushou" @click="tab(1)">
          文章
          <div v-if="type==1" class="xian"></div>
        </div>
        <div class="item shoushou" @click="tab(2)">
          视频
          <div v-if="type==2" class="xian"></div>
        </div>
        <div class="item shoushou"  @click="tab(3)">
          问答
          <div v-if="type==3" class="xian"></div>
        </div>
      </div>

      <div class="timeselect">
        <div class="timeleft" style="margin-right:13px;">
          <div class="timezi">时间:</div>

          <div class="timeitem shoushou" :class="[select_t==0?'timeitem_s':'']" @click="selecttime(0)">7天</div>
          <div class="timeitem shoushou" :class="[select_t==1?'timeitem_s':'']" @click="selecttime(1)">14天</div>
          <div class="timeitem shoushou" :class="[select_t==2?'timeitem_s':'']" @click="selecttime(2)">30天</div>
        </div>
        <div class="timeright">
          <div class="timezi" style="margin-right:34px;">起止时间:</div>

          <el-date-picker
            class="boxtcj"
            v-model="value1"
            type="daterange"
            range-separator="至"
            value-format="yyyy-MM-dd"
            @change="xuanriqi"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
          <!-- <div class="boxtcj">
            <el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
          </div>
          <div class="hengtcj">-</div>
          <div class="boxtcj">
            <el-date-picker v-model="value2" type="date" placeholder="选择日期"></el-date-picker>
          </div>-->
        </div>
      </div>
    </div>

    <div class="itembox_5">
      <div class="item_a">
        <div class="item_azi">文章量</div>
        <div class="item_anum">{{all.article}}</div>
        <img class="item_img" src="../assets/shujufenxi/s1.png" alt />
      </div>

      <div class="item_a">
        <div class="item_azi" style="color:rgba(138,215,191,1);">阅读量</div>
        <div class="item_anum">{{all.read}}</div>
        <img class="item_img" src="../assets/shujufenxi/s3.png" alt />
      </div>
      <div class="item_a">
        <div class="item_azi" style="color:rgba(38,106,255,1);">粉丝阅读量</div>
        <div class="item_anum">{{all.fansReadCount}}</div>
        <img class="item_img" src="../assets/shujufenxi/s4.png" alt />
      </div>
      <div class="item_a" style="margin-right:0;">
        <div class="item_azi" style="color:rgba(127,101,186,1);">评论量</div>
        <div class="item_anum">{{all.comment}}</div>
        <img class="item_img" src="../assets/shujufenxi/s5.png" alt />
      </div>
    </div>

    <div class="zhu_cj">
      <div class="head">
        <div class="head-title">数据详情</div>
        <div class="duoxuan">
          <div class="df shoushou" v-for="(item,index) in list " :key="index" @click="xuanzhong(index)">
            <img v-if="item.checked==true" src="../assets/shujufenxi/s6.png" alt />
            <img v-if="item.checked==false" src="../assets/shujufenxi/s6-w.png" alt />

            <div>{{item.title}}</div>
          </div>
        </div>
      </div>
      <div class="body_zhu">
        <div id="echarts"></div>
      </div>
    </div>
  </div>
</template>

<script>

// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')


export default {
  data() {
    return {
      value1: "",
      // value2: ""
      type: 1,
      select_t: "",
      all: "",
      dataAxis: '',
      data: '',

      list: [
        { title: "阅读量", checked: true,num:'' },
        { title: "粉丝阅读量", checked: true,num:'' },
        { title: "转发量", checked: true,num:'' },
        { title: "收藏量", checked: true ,num:''},
        { title: "评论量", checked: true ,num:''}
      ]
    };
  },

  methods: {
    xuanzhong(index) {
      this.list[index].checked = !this.list[index].checked;
      var dataAxis = [];
      var data=[]

//       article: (...)
// collection: (...)
// comment: (...)
// fansReadCount: (...)
// read: (...)
// share: (...)
      this.list.forEach(element => {
        if (element.checked) {
          dataAxis.push(element.title);
          data.push(element.num)
        }
      });

      this.dataAxis=dataAxis
      this.data=data
      this.setechar()
    },
    // wxuanzhong(index){
    //   this.list[index].checked=false
    // },
    tab(index) {
      this.type = index;

       if(index==1){
        this.$store.state.mianbaoxie=['乐讯号','数据分析','文章']
      }

      if(index==2){
        this.$store.state.mianbaoxie=['乐讯号','数据分析','视频']
      }
       if(index==3){
        this.$store.state.mianbaoxie=['乐讯号','数据分析','问答']
      }
      this.getall();
    },
    selecttime(index) {
      this.select_t = index;
      this.value1 = "";
      this.getall();
    },
    xuanriqi() {
      console.log("1");

      this.select_t = "-1";
      this.getall();
    },

    getall() {
      // media/descs/data_analysis
      var start, end;
      if (this.select_t == "-1") {
        start = this.value1[0];
        end = this.value1[1];
      } else {
        var timestamp = new Date().getTime();

        var endstr = new Date(timestamp);
        var year = endstr.getFullYear();
        var month = endstr.getMonth() + 1;
        var date = endstr.getDate();

        if(month<10){
            month='0'+month
        }
         if(date<10){
            date='0'+date
        }

        // .format("yyyy-MM-dd");
        end = year + "-" + month + "-" + date;

        if (this.select_t == 0) {
          var startstr = new Date(timestamp - 24 * 3600 * 1000 * 7);
          var year1 = startstr.getFullYear();
          var month1 = startstr.getMonth() + 1;
          var date1 = startstr.getDate();
          
          // .format("yyyy-MM-dd");
          
        }
        if (this.select_t == 1) {
          var startstr = new Date(timestamp - 24 * 3600 * 1000 * 14);
          var year1 = startstr.getFullYear();
          var month1 = startstr.getMonth() + 1;
          var date1 = startstr.getDate();

          // .format("yyyy-MM-dd");
          
        }
        if (this.select_t == 2) {
          var startstr = new Date(timestamp - 24 * 3600 * 1000 * 30);
          var year1 = startstr.getFullYear();
          var month1 = startstr.getMonth() + 1;
          var date1 = startstr.getDate();

          // .format("yyyy-MM-dd");
         
        }

         if(month1<10){
            month1='0'+month1
        }
         if(date1<10){
            date1='0'+date1
        }

        start = year1 + "-" + month1 + "-" + date1;
      }

      console.log(start, end);
      this.$get(
        // method: "get",

        "media/descs/data_analysis",
        {
          uqid: localStorage.getItem("uqid"),
          status: this.type,
          start: start,
          end: end
        }
      ).then(response => {
        console.log(response);
        if (response.error == "0") {
          this.all = response.data;
        //    "阅读量",
        // "粉丝阅读量",
        // "转发量",
        // "收藏量",
        // "评论量"
          this.list[0].num=response.data.read
          this.list[1].num=response.data.fansReadCount
          this.list[2].num=response.data.share
          this.list[3].num=response.data.collection
          this.list[4].num=response.data.comment

          var dataAxis = [];
          var data=[]
          this.list.forEach(element => {
            if (element.checked) {
              dataAxis.push(element.title);
              data.push(element.num)
            }
          });

          this.dataAxis=dataAxis
          this.data=data

          this.setechar()

        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error"
          });
        }
      });
    },

    setechar() {
      var myChart = echarts.init(document.getElementById("echarts"));

      var dataAxis = this.dataAxis;
      var data = this.data;

      var yMax = 500;
      var dataShadow = [];

      for (var i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
      }

      var option = {
        // title: {
        //     text: '特性示例：渐变色 阴影 点击缩放',
        //     subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
        // },
        xAxis: {
          data: dataAxis,
          axisLabel: {
            // inside: true,
            textStyle: {
              color: "#333"
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          z: 10
        },
        yAxis: {
          // daya=
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: "#999"
            }
          }
        },
        dataZoom: [
          {
            type: "inside"
          }
        ],
        series: [
          {
            // For shadow
            type: "bar",
            itemStyle: {
              color: "rgba(0,0,0,0.05)"
            },
            barGap: "-100%",
            barCategoryGap: "40%",
            data: dataShadow,
            animation: false
          },
          {
            type: "bar",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#83bff6" },
                { offset: 0.5, color: "#188df0" },
                { offset: 1, color: "#188df0" }
              ])
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#2378f7" },
                  { offset: 0.7, color: "#2378f7" },
                  { offset: 1, color: "#83bff6" }
                ])
              }
            },
            data: data
          }
        ]
      };

      myChart.setOption(option);

      // Enable data zoom when user click bar.
      var zoomSize = 6;
      myChart.on("click", function(params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        myChart.dispatchAction({
          type: "dataZoom",
          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
          endValue:
            dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
        });
      });
    }
  },
  mounted() {
    if(!localStorage.getItem('uqid')){
      this.$router.push({ path: "/login", query: {  } });
      return
    }
    this.getall();
    // this.setechar()
  }
};
</script>

<style  scoped>
.shujufenxi::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.shujufenxi {
  overflow: hidden;
  overflow-y: scroll;
  height: calc(100% - 118px);
}
.shang {
  width: 100%;
  height: 128px;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  padding: 20px 19px;
  box-sizing: border-box;
}
.tab {
  display: flex;
}
.xian {
  width: 34px;
  height: 3px;
  background: rgba(38, 106, 255, 1);
  opacity: 1;
  position: absolute;
  bottom: -8px;
}
.item {
  margin-right: 47px;
  position: relative;
  font-size:16px;
  font-weight: 550;
}

.timeselect {
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  /* padding: 0 19px; */
  margin-top: 32px;
}
.timeleft,
.timeright {
  display: flex;
  align-items: center;
}

.timeright {
}

.timezi {
  font-size: 14px;
  font-weight: 550;
  line-height: 20px;
  color: rgba(51, 51, 51, 1);
  margin-right: 13px;
}
.timeitem {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  margin-right: 13px;
}
.timeitem_s {
  color: rgba(38, 106, 255, 1);
}
.hengtcj {
  margin: 0 8px;
}
.itembox_5 {
  margin-top: 19px;
  display: flex;
  justify-content: space-between;
}
.item_a {
  width: 25%;
  margin: 0 24px 0 0;
  box-sizing: border-box;
  height: 151px;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  border-radius: 20px;
  padding: 0 14px 18px;
  box-sizing: border-box;
  position: relative;
}
.item_azi {
  font-size: 14px;
  font-weight: 550;
  line-height: 20px;
  color: rgba(249, 171, 186, 1);
  margin-top: 32px;
}

.item_anum {
  font-size: 16px;
  margin-top: 24px;
  font-weight: 550;
  line-height: 22px;
  color: rgba(51, 51, 51, 1);
  z-index: 1;
}
.item_img {
  position: absolute;
  bottom: 18px;
  left: 14px;
  width: 85%;
  max-height: 50px;
}
.zhu_cj {
  width: 100%;
  /* height: 420px; */
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  margin-top: 20px;
}
.zhu_cj {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}
.duoxuan {
  display: flex;
  align-items: center;
}
.df {
  display: flex;
  align-items: center;
  margin-right: 13px;
  font-size: 10px;
}
.df img {
  width: 12px;
  margin-right: 3px;
}
.head {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 19px;
  box-sizing: border-box;
  width: 100%;
}
.head-title {
  font-size: 16px;
  font-weight: 550;
}

#echarts {
  width: 800px;
  height: 450px;
  margin: 10px auto;
}
</style>
<style>
.el-date-editor.el-input {
  width: 100%;
}

.el-icon-date:before {
  content: "";
  display: block;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../assets/fans/f4.png);
}
</style>